<?php require_once 'classes/mySession.php';

if(!$pgSession->isUserLoggedIn()){
	$pgSession->redirect("./login.php");
}else{
	$owner = $pgSession->getUserId();
}
?>
<html lang="pt-BR">
<head>
	<title>PG++ :: Ferramenta de Anotação de Localização em Fotografias</title>
	<meta charset="utf-8">
	<meta name="description" content="Ferramenta de anotação de localização em coleções de fotografias pessoais.">
	<meta name="author" content="Davi Serrano e George Henrique">
	<script src="lib/jquery.js"></script>
	<script src="lib/jquery-ui.js"></script>
	
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/styles.css">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
	<script type="text/javascript">
	var geoAlbums, geoPhotos;

	var userId = <?php echo $owner;?>;

	function initGeoAlbums(){
		$.ajax({
			url: './getGeoAlbumInfo.php',
			type: "GET",
			dataType: "json",
			async: false,
			success: function(data) {
				if(data.status){
					geoAlbums = data.geoalbums;
					geoPhotos = data.photos;
					buildLists(null);
				}else{
					alert("Não foi possível salvar. Tente novamente mais tarde");
				}
			},
			error: function(data) {
				console.log(data);
			}
		});
	}

	function buildLists(parentId){
		var innerAlbumLists = "";
		var innerPhotoLists = "";
		if(!parentId){
			document.getElementById("albumName").innerHTML = '';
		}
		for(var aI in geoAlbums){
			var album = geoAlbums[aI];
			if((album["parent"] && album["parent"]==parentId) || (!album["parent"] && !parentId)){
				innerAlbumLists+=getAlbumDiv(album);
			}

			if(album["id"]==parentId && parentId){
				var albName = album["translation"];
				if(!albName || albName=='null'){
					var albName = album["name"];
				}
				document.getElementById("albumName").innerHTML = '<u><a href="#" style="color: white;" onclick="buildLists('+album["parent"]+')"> ..</a></u>/'+albName;
			}
		}

		if(innerAlbumLists.length>0){
			innerAlbumLists = '<div style="float: left; margin-top: 5px; border: 0px;"><b style="font-size: 20;">Álbuns</b></div><div class="caixa-geo-album" id="geoAlbums" style="width: 100%;">'+innerAlbumLists+'</div><div class="clear"></div>';
		}

		innerPhotoLists+=getPhotoDivs(parentId);
		
		if(innerPhotoLists.length>0){
			innerPhotoLists = '<div style="float: left; margin-top: 5px; border: 0px;"><b style="font-size: 20;">Fotos</b></div><div class="caixa-geo-photos" id="geoAlbumPhotos" style="width: 100%;">'+innerPhotoLists+'</div><div class="clear"></div>';
		}
		
		
		document.getElementById("caixaConteudo").innerHTML = innerAlbumLists
															+innerPhotoLists+'</div><div class="clear"></div>';
	}

	function getAlbumDiv(album){
		var albName = album["translation"];
		if(!albName || albName=='null'){
			var albName = album["name"];
		}
		var albumDiv = '<div class="imagem">'+
							'<img style="max-width: 100%; max-height: 100%;" src="./photos/'+userId+'/'+getAlbumCover(album["id"])+'"/>'+
							'<div class="degrade">'+albName+'</div>'+ 
							'<a href="#" onclick="buildLists('+album["id"]+')" class="opacity"></a>'+
						'</div>';

		return albumDiv;
	}

	var renderedPhotos = [];

	function getPhotoDivs(aid){
		renderedPhotos = [];
		var innerHtmlLoc = "";
		for(var pind in geoPhotos){
			if(geoPhotos[pind]['gaid'] == aid || !aid){
				if(renderedPhotos.indexOf(geoPhotos[pind]["id"])<0){
					renderedPhotos.push(geoPhotos[pind]["id"]);
					
					var photoDiv = '<div class="imagem">'+
										'<img style="max-width: 100%; max-height: 100%;" src="./photos/'+userId+'/'+geoPhotos[pind]['file_name']+'"/>'+
										'<div class="degrade"></div>'+
										'<a href="#" onclick="callPhotoChange('+geoPhotos[pind]["id"]+')" class="opacity"></a>'+
									'</div>';
									
					innerHtmlLoc+=photoDiv;
				}
			}
		}
		
		return innerHtmlLoc;
	}

	function callPhotoChange(pid){
		for(var pind in geoPhotos){
			if(geoPhotos[pind]['id'] == pid){
				$(".fundo").fadeIn();
				$(".overlap").center();
				$(".overlap").fadeIn();
				change(geoPhotos[pind]);
			}
		}
	}

	function getAlbumCover(aid){
		for(var pind in geoPhotos){
			if(geoPhotos[pind]['gaid'] == aid){
				return geoPhotos[pind]['file_name'];
			}
		}
	}
	</script>
</head>

<body onload="initGeoAlbums()">

	<header>
		<div class="topo">
			<a href="./"><img class="logo left" src="images/logo.png"/></a>
			<nav class="nav-topo">
				<a href="./home.php">Mapa</a>
				<a href="./album.php">Álbuns</a>
				<a href="./geoAlbum.php">Geo-Álbuns</a>
				<a href="./photo.php">Fotos</a>
				<a href="./logout.php">Logout</a>
			</nav>
			<div class="clear"></div>
		</div>
	</header>
	
	<div class="clear"></div>
	
	<section>
		<div class="conteudo">
			<h1></h1>
			
			<div class="topo-caixa">
				<span class="titulo">Geo-Álbuns:</span><span class="titulo" id="albumName"></span>
				
			</div>
			
			<div class="caixa" id="caixaConteudo">
				
				
				<!-- 
				<div class="imagem">
					<a href="./consulta.php?photoid=<?php // echo $photo->getId();?>" class="ver-foto">
						<img style="max-width: 100%; max-height: 100%;" src="<?php //echo $photo->getURL();?>"/>
					</a>
				</div>
				
				'<div class="imagem">'+
					'<a href="./consulta.php?photoid='+photoid+'" class="ver-foto">'+
						'<img style="max-width: 100%; max-height: 100%;" src="'./photos'/'+user+'/'+fileName+'/>'+
					'</a>'+
				'</div>';
				
				<div class="navegacao">
					<a href="#" class="voltar"><< Voltar</a>
					<a href="#" class="numero">1</a>
					<a href="#" class="numero">2</a>
					<a href="#" class="numero ativo">3</a>
					<a href="#" class="numero">4</a>
					<a href="#" class="numero">5</a>
					<a href="#" class="avancar">Avançar >></a>
					<div class="clear"></div>
				</div> -->
				
			</div>
			
			<div class="clear"></div>
		</div>
	</section>
	
	<div class="clear"></div>
	
	<footer>
		<nav class="rodape">
			<a href="#">SOBRE</a>
			<a href="#">CONTATO</a>
		</nav>
	</footer>
	
	<div class="fundo"></div>
	<div class="overlap">
		<div class="caixa-foto">
			<div class="foto">
				<img style="height: 100%; max-width: 100%; margin: auto; display: block;" src="images/default.jpg"/>
			</div>
			<p class="bold font-14">Descrição:<br>
				<textarea rows="3" cols="50" maxlength="255" readonly="readonly" class="descricao" id="descricaoText"></textarea>
				<a href="#" onclick="editData()" id="photoDataButton" class="editar">Editar</a>
			</p>
		</div>
		<div class="caixa-localizacao">
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.exp&libraries=places"></script>
			<div style="overflow:hidden;height:348px;width:278px;">
				<input type="text" id="pac-input" class="controls" placeholder="Busca">
				<div id="gmap_canvas" style="height:348px;width:278px;"></div>
				<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
				<!-- <a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">www.map-embed.com</a> -->
			</div>
			<input type="hidden" id="currentPhotoid" />
			<script type="text/javascript" src="js/pg_googleMapsViewPhoto.js"></script>
		</div>
		
		<div class="clear"></div>
	</div>
	
<script type="text/javascript">
	$(function() {	
		$(".fundo").click(function() {
			$(".fundo").fadeOut();
			$(".overlap").fadeOut();
		});
	});

	function editData(){
		if(document.getElementById("descricaoText").readOnly){
			document.getElementById("descricaoText").readOnly=false;
			document.getElementById("photoDataButton").innerHTML="Salvar";
		}else{
			var photoid = document.getElementById("currentPhotoid").value;
			var text = document.getElementById("descricaoText").value;
			var urlEncoded = "./add_description.php?description="+encodeURIComponent(text)+"&photoid="+photoid;
			$.ajax({
				url: urlEncoded,
				type: "GET",
				dataType: "json",
				async: false,
				success: function(data) {
					if(data.status){
						document.getElementById("descricaoText").readOnly=true;
						document.getElementById("photoDataButton").innerHTML="Editar";
					}else{
						alert("Não foi possível salvar. Tente novamente mais tarde");
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		}
	}
	
	function change(data) {
		$(".foto img").attr("src", "./photos/"+data.owner+"/"+data.file_name);
		document.getElementById("descricaoText").value = (data.text?data.text:"");
		document.getElementById("currentPhotoid").value = data.id;
		if(photoMarker) photoMarker.setDraggable(false);
		if(infowindow) infowindow.close();
		if(!map){
			init_map(data.latitude, data.longitude);
		}else{
			
			if(data.latitude && data.latitude!=0 && data.longitude && data.longitude!=0){ 
				var position = new google.maps.LatLng(data.latitude, data.longitude);
				map.setCenter(position);
				map.setZoom(13);
				photoMarker.setMap(map);
				photoMarker.setPosition(position);
			}else{
				map.setZoom(0);
				map.setCenter(new google.maps.LatLng(0, 0));
				photoMarker.setMap(null);
			}
		}
	}
	
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
													$(window).scrollTop()) + "px");
		this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
													$(window).scrollLeft()) + "px");
		return this;
	}

	
</script>
</body>
</html>
